<template>
	<div class="virtual-currency-rank-container">
    <div class="charges-top">
      <div>
        <p class="fontGilroy">{{sort}}</p>
        <p>{{title}}</p>
      </div>
    </div>
    <div class="list" v-if="list && list.length>0">
      <div class="list-title">
        <span>排名</span>
        <span>{{identity}}</span>
        <span>{{rank_type}}</span>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad"
      >
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <span>
            <i :class="getCls(item.no)">{{getText(item.no)}}</i>
          </span>
          <span>{{item.nickname}}</span>
          <span class="fontGilroy">{{item.virtual_currency}}</span>
        </div>
      </van-list>      
    </div>
    <div v-else>
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
  import { getVirtualCurrencyRank } from '@/api/user/member/memberApi'
  import noData from '@/components/noData'
  // import noRankImg from '@img/user/no-order-rank.png'
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    components: {
      noData
    },
    data() {
      return {
        noData: {
          width: '214px',
          img: 'https://img.wifenxiao.com/h5-wfx/images/user/no-order-rank.png',
          text: '暂无排名',
          txtMarginTop: '-30px'
        },
        title: '我的排名',
        sort: '',
        identity: '用户',
        rank_type: '虚拟币',
        list: [],
        loading: false,
        finished: false,
        error: false,
        p: 2
      }
    },
    methods: {
      getCls(sort) {
        if (sort <= 3) {
          return `icon icon${sort}`
        } else {
          return 'text'
        }
      },
      getText(sort) {
        if (sort > 3) {
          return sort
        }
      },
      getLists() {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
  
        getVirtualCurrencyRank().then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            const resData = res.data
            this.sort = resData.my_no
            this.rank_type = resData.virtual_name
            this.list = resData.virtual_rank
          } else {
            this.$Error(res.msg)
          }
        })
      },
      onLoad() {
        this.loading = true
        const data = {
          p: this.p
        }
        getVirtualCurrencyRank(data)
          .then(res => {
            this.loading = false
            if (res.data.virtual_rank && res.data.virtual_rank.length) {
              this.list.push(...res.data.virtual_rank)
              this.p++
            } else {
              this.finished = true
            }
          })
          .catch(() => {
            this.error = true
          })
      }
    },
    created() {
      this.getLists()
    }
  })
</script>

<style lang="scss">
@import 'src/styles/variables';
@import 'src/styles/mixin';
.virtual-currency-rank-container{
  .charges-top {
    height: 360px;
    // line-height: 80px;
    text-align: center;
    background-color: #f0f0f0;
    background: url('https://img.wifenxiao.com/h5-wfx/images/user/point_bg_rank.png') no-repeat;
    background-size: 100% 100%;
    padding: 76px 0 0;
    color: #fff;
    p:first-child {
      font-size: 72px;
    }
    p:last-child {
      font-size: 28px;
      margin-top: 16px;
      // font-weight: bold;
      letter-spacing: 2px;
      color:#f4f4f4;
    }
  }
  .list {
    margin: -90px 20px 0;
    background-color: $default;
    border-radius: 20px;
    overflow: hidden;
    &-title {
      display: flex;
      align-items: center;
      height: 90px;
      padding:0 32px;
      background-color: #fffaf7;
      span {
        font-size: 28px;
        color: #8e8179;
        &:nth-child(1) {
          width:26%;
          margin-right:8%;
          text-align:center;
        }
        &:nth-child(2) {
          width:34%;
          margin-right:2%;
        }
        &:nth-child(3) {
          width:30%;
        }
      }
    }
    &-item {
      height: 110px;
      display: flex;
      align-items: center;
      margin: 0 32px;
      border-bottom: 1px solid #eee;
      span {
        font-size: 26px;
        &:nth-child(1) {
          width:26%;
          margin-right:8%;
        }
        &:nth-child(2) {
          width:34%;
          margin-right:2%;
          @include showEllipsis;
        }
        &:nth-child(3) {
          width:30%;
          color: #ff6600;
        }
        .icon,
        .text {
          display:block;
          width: 80px;
          height: 40px;
          margin:0 auto;
          line-height: 40px;
          font-weight: bold;
          text-align: center;
          // float: left;
          background-size: auto 100%;
          background-position: center;
          background-repeat: no-repeat;
          &.icon1 {
            background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/No1.png');
          }
          &.icon2 {
            background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/No2.png');
          }
          &.icon3 {
            background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/No3.png');
          }
        }
      }
    }
  }
}
</style>